
const isDev=process.env.NODE_ENV ==='development' ; //判断是不是生产环境
const HTMLPlugin=require('html-webpack-plugin');  //导入HTMLPlugin
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //加这行是打包vue文件需要的，vue-loader的15.7版本之后需要这个
const path =require('path');  //引入node.js中专门操作路径的模块
const config={
    target:'web',  //开发环境，定义的目标是web平台
	entry: path.join(__dirname ,"./src/index.js"),//唯一入口文件
	output: {
	   path: path.join(__dirname ,"./dist"),//打包后的文件存放的路径
	   filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                use: 'vue-loader'
              },
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.jsx$/,
                use:['babel-loader']
            },
            {
                test:/\.styl$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true,
                        }
                    },
                    'stylus-loader'
                ]
            },  //处理stylus
			{
                test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use:[
                    {
                        loader:"url-loader",
                        options:  {
                            limit: 1024,  
                            //loader是可以配置一些选项的，用options把一些参数传递给url-loader指定它的操作方式
                            //url-loader可以转换我们的图片为base64代码直接写在js代码中。而不用生成一个新的文件
                            //可以有效减少http请求，于是小于1024的图片，就会被自动转化为base64的js代码
                            name:'[name]-aaa.[ext]', //设置输出的图片的名字为原来图片的名字
                            outputPath: 'images', // 该路径相对于html输出路径
                        }
                    }
                ]
            }  //处理图片
        ]
    },
    plugins:[
         new VueLoaderPlugin(),
         new HTMLPlugin(),   //使用HTMLPlugin，里面可以有很多配置
         new webpack.DefinePlugin({
             'process.env':{
                 NODE_ENV:isDev ? '"development"':'"production"'
             }
         }),  //这个东西的作用是在我们写js代码的时候也可以引用这个process.env从而判断是开发环境还是生产环境。
    ]
}
if(isDev){
    configdevtool='#cheap-module-eval-source-map',  //让代码变成更好看的代码
    config.devServer={
        port:8000,  //设置服务的端口
        host:'127.0.0.1',   //设置可以通过ip进行访问
        overlay:{
            error:true    //设置如果有打包错误，就会把错误反馈到网页上
        },
        open:true,   //设置true之后，运行npm  run dev就会自动打开http://127.0.0.1:8000/
        hot:true,
    },
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin()  //热加载
    )
}
module.exports=config